<template>
  <div
    style="
      background-image: url('img/register.jpg');
      width: 100vw;
      height: 100vh;
      background-size: 100% 100%;
    "
  >
    <div class="zz">
      <!-- ref="ruleForm" -->
      <el-form
        ref="loginFormRef"
        :model="ruleForm"
        status-icon
        :rules="rules"
        label-width="100px"
        class="demo-ruleForm"
      >
        <span class="zc" style="color: white">欢迎注册</span>
        <el-form-item label="用户名" prop="name">
          <el-input
            placeholder="请输入用户名"
            v-model="ruleForm.name"
          ></el-input>
        </el-form-item>

        <el-form-item label="手机号" prop="phone" style="position: relative">
          <el-input
            placeholder="请输入手机号"
            v-model.number="ruleForm.phone"
          ></el-input>
          <el-alert
            title="手机号已存在"
            type="error"
            :closable="false"
            v-if="xing"
          >
          </el-alert>
        </el-form-item>

        <el-form-item label="密码" prop="password">
          <el-input
            placeholder="请输入密码"
            type="password"
            v-model="ruleForm.password"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="checkPass">
          <el-input
            placeholder="请再次输入密码"
            type="password"
            v-model="ruleForm.checkPass"
            autocomplete="off"
          ></el-input>
          <div id="code"></div>
        </el-form-item>
        <span class="pop">已有账号？立即<a href="/login">登录</a></span>
        <el-form-item>
          <el-button
            style="padding: 12px 43px"
            type="primary"
            @click="submitForm('ruleForm')"
            >立即注册</el-button
          >
          <el-button
            style="padding: 12px 43px"
            type="info"
            @click="resetLoginForm"
            >立即重置</el-button
          >
        </el-form-item>
        <span style="font-size: 12px; margin-left: 100px; color: #aaa"
          >若继续操作，即表示您同意我们的使用条款并确认已经阅<br />
          <span style="margin-left: 100px"> 读我们的隐私政策。</span></span
        >
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  beforeCreate: function () {
    document.getElementsByTagName("body")[0].className = "body-bg";
  },
  data() {
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        if (this.ruleForm.checkPass !== "") {
          this.$refs.ruleForm.validateField("checkPass");
        }
        callback();
      }
    };
    var validatePass2 = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value !== this.ruleForm.password) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    };
    return {
      ruleForm: {
        name: "",
        phone: "",
        pass: "",
        checkPass: "",
        password: "",
      },
      xing: false,
      rules: {
        phone: [
          { required: true, message: "手机号不能为空", trigger: "blur" },
          {
            pattern: /^1[3-9]\d{9}$/,
            message: "请检查手机号格式",
            trigger: "blur",
          },
        ],
        password: [
          { required: true, message: "密码不能为空", trigger: "blur" },
          {
            pattern: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{8,16}$/,
            message: "密码在8-16位之间且含有字母与数字",
            trigger: "blur",
          },
          { validator: validatePass, trigger: "blur" },
        ],
        checkPass: [
          { required: true, message: "请确认密码", trigger: "blur" },
          { validator: validatePass2, trigger: "blur" },
        ],
        name: [
          { required: true, message: "用户名不能为空", trigger: "blur" },
          {
            pattern: /^[\u4E00-\u9FA5A-Za-z0-9]{2,6}$/,
            message: "用户名长度在2-6位之间",
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate(v => {
        const props = `username=${this.ruleForm.name}&phone=${this.ruleForm.phone}&password=${this.ruleForm.password}`;
        const url = "/register";
        this.axios.post(url, props).then(res => {
          console.log(res);
          if (res.data.code == 200) {
            alert("注册成功");
            this.$router.push("/login");
          } else {
            alert("注册失败，请重新注册");
          }
        });
      });
    },
    //点击重置按钮 重置登录表单
    resetLoginForm() {
      this.$refs.loginFormRef.resetFields();
    },
  },
};
</script>
<style>
.zz .el-form-item__label {
  color: white;
}
.zz .el-alert {
  position: absolute;
  top: 22px;
  left: -15px;
  background-color: transparent;
}
</style>
<style lang="scss">
.zz {
  border-radius: 15px;
  width: 800px;
  margin: 80px auto;
  position: absolute;
  left: 21.5%;
  top: -28px;
  transform: translateX(10%);
}
.zc {
  //   color: white;
  display: inline-block;
  font-weight: bold;
  font-size: 32px;
  margin-left: 45%;
  margin-bottom: 20px;
}
.el-form {
  display: inline-block;
  margin-top: 30px;
  margin-left: 147px;
  // background-color: red;
  padding: 50px 0 50px 0;
}
.el-input__inner {
  width: 300px;
}
.pop {
  color: rgb(204, 199, 199);
  display: inline-block;
  width: 100%;
  text-align: end;
  position: relative;
  top: -5px;
  a {
    color: skyblue;
    text-decoration: none;
  }
}
</style>
